import React, { Component } from 'react';
import {
  StyleSheet, View, DeviceEventEmitter, Text,
} from 'react-native';
import produce from 'immer';
import Timeline from 'react-native-timeline-listview';
import Theme from '../../../../native-base-theme/variables/commonColor';
import * as techDocService from '../../../../services/techDoc';
import { UtilToast } from '../../../../utils/util-method';

class ChangeRecord extends Component {
  constructor(props) {
    super(props);
    this.state = {
      datas: [],
    };
  }

  componentDidMount() {
    this.getDatas();
  }

  getDatas = async () => {
    try {
      DeviceEventEmitter.emit('showLoading', true);
      const { datas } = this.props;
      if (datas && datas.equipmentId) {
        const data = await techDocService.getChangeRecord({ equipmentId: datas.equipmentId });
        // const data = await techDocService.getChangeRecord({ equipmentId: '402892e467dea9fd0167e478152d2f31' });
        DeviceEventEmitter.emit('showLoading', false);
        if (data && data.length > 0) {
          this.setState(produce(draft => {
            draft.datas = data;
          }));
        } else {
          UtilToast('暂无变更记录信息', 'danger');
        }
      } else {
        DeviceEventEmitter.emit('showLoading', false);
        UtilToast('没有设备信息', 'danger');
      }
    } catch (e) {
      console.log(e);
      DeviceEventEmitter.emit('showLoading', false);
    }
  }

  _getDataShow = () => {
    if (!this.state.datas || !this.state.datas.length) {
      return [];
    }
    const timelineData = [];
    this.state.datas.forEach(item => {
      timelineData.push({
        time: item.alterationTime && item.alterationTime.substring(0, 7), // 变更时间
        title: item.alterationTypeDesc,
        description: item.alterationDesc,
        // icon: require('../../../../../assets/images/circle-white.png'),
      });
    });
    return timelineData;
  }

  renderTime = (rowData) => (
    <Text style={{ color: rowData.time ? '#ffffff' : Theme.myPrimary, paddingLeft: 4, paddingRight: 4 }}>
      {rowData.time ? rowData.time : '2018-12'}
    </Text>
  )

  renderDetail = (rowData) => {
    const title = <Text style={[styles.title]}>{rowData.title}</Text>;
    let desc = null;
    if (rowData.description) {
      desc = (
        <View style={styles.descriptionContainer}>
          <Text style={[styles.textDescription]}>{rowData.description}</Text>
        </View>
      );
    }
    return (
      <View style={{ flex: 1, marginTop: -12, marginBottom: desc ? 10 : 20 }}>
        {title}
        {desc}
      </View>
    );
  }

  _getTimeLine = (data) => (
    <Timeline
      circleSize={16}
      circleColor="rgb(68,101,225)"
      lineColor="rgb(216,216,216)"
      timeStyle={{ color: '#ffffff' }}
      titleStyle={{ color: '#ffffff' }}
      descriptionStyle={{ color: '#ffffff' }}
      renderDetail={this.renderDetail}
      iconStyle={{ marginTop: -2 }}
      options={{
        style: { paddingTop: 5 },
        removeClippedSubviews: false,
      }}
      data={data}
      separator={false}
      renderTime={this.renderTime}
    />
  )

  render() {
    const data = this._getDataShow();
    return (
      <View style={styles.tabContent}>
        {/* <Text>1111</Text> */}
        {this.state.datas.length > 0 && this._getTimeLine(data)}
      </View>
    );
  }
}

const styles = StyleSheet.create({
  tabContent: {
    backgroundColor: Theme.myPrimary,
    width: '100%',
    height: '100%',
    padding: 8,
  },
  title: {
    fontSize: 16,
    fontWeight: 'bold',
    color: '#ffffff',
  },
  descriptionContainer: {
    flexDirection: 'row',
    paddingRight: 50,
  },
  textDescription: {
    color: '#ffffff',
  },
});

export default ChangeRecord;
